////////////////////////////////////////////
// 这里实现标签页的切换
////////////////////////////////////////////
initSwitchTab()
function initSwitchTab() {
    //1.获取到相关的元素(标签页的按钮，会话列表，好友列表)
    var tabSession = document.querySelector(".tab .tab-session");
    var tabFriend = document.querySelector(".tab .tab-friend");
    //document.querySelectorAll可以选中多个元素最终得到的结果是数组
    //[0] 会话列表
    //[1] 好友列表
    var lists = document.querySelectorAll(".list");


    //2.针对标签页按钮，注册点击事件
    //  如果点击的是会话标签按钮，就会把会话标签的按钮的背景图片进行设置
    //  同时将好友列表隐藏将会话列表显示出来
    //  如果是点击的是好友标签按钮 上述同理
    tabSession.onclick = function() {
        //设置图标
        tabSession.style.backgroundImage =  'url(img/对话.png)';
        tabFriend.style.backgroundImage = 'url(img/用户2.png)';
        lists[0].classList = 'list';
        lists[1].classList = 'list hide';
    }
    tabFriend.onclick = function() {
        //设置图标
        tabFriend.style.backgroundImage = 'url(img/用户.png)';
        tabSession.style.backgroundImage =  'url(img/对话2.png)';
        lists[1].classList = 'list';
        lists[0].classList = 'list hide';
    }

}


////////////////////////
//实现消息发送和接收逻辑
//////////////////////
// function initSendButton() {
//     //1.获取到发送按钮和消息输入框
//     let sendButton = document.querySelector(".right .ctrl button");
//     //2.给发送按钮注册一个点击事件
//     sendButton.onclick = () => sendButton123();
//
// }
function sendButton123 () {
    let messageInput = document.querySelector(".right .message-input")
    //1.先针对输入框的内容进行判定  如果输入框的内容就什么都不干
    if(!messageInput.value) {
        //value 的值如果是null 或者''都会触发这个条件
        return;
    }
    //2.获取当前选中的li sessionId
    let selectLi = document.querySelector("#session-list .selected");
    if (selectLi == null) {
        //当前没有li标签被选中
        return;
    }
    let sessionId = selectLi.getAttribute('message-session-id');
    //3.构造json数据
    let req = {
        type: 'message',
        sessionId: sessionId,
        content: messageInput.value
    };
    //js自带的方法
    req = JSON.stringify(req);
    console.log("[webSocket] send :" + req);
    //4.通过webSocket发送消息
    webSocket.send(req);
    //5.发送完成之后清空之前的输入框
    messageInput.value = '';
}
// initSendButton();
////////////////////////
//初始化 webSocket
//////////////////////

//创建 webSocket 实例

let webSocket = new WebSocket("ws://" + location.host + "/webSocketMessage");

//给webSocket注册一些回调函数
webSocket.onopen = function() {
    //  连接建立完成后就会自动完成的
    console.log("websocket 连接成功");
}
webSocket.onclose = function() {
    //连接断开后就会自动完成的
    console.log("websocket 连接断开");

}
webSocket.onerror = function() {
    //连接出现异常时就会自动完成的
    console.log("websocket 连接异常");

}
webSocket.onmessage = function(e) {
    //收到消息时，就自动完成的
    console.log("websocket 收到消息" + e.data);
    // 此时收到的 e.data 是个 json 字符串, 需要转成 js 对象
    let resp = JSON.parse(e.data);
    if (resp.type == 'message') {
        //处理响应
        handleMessage(resp);
    } else {
        //响应的type出错了
        console.log("resp.type 不符合要求")
    }

}

function handleMessage(resp) {
    // 把客户端收到的消息, 给展示出来.
    // 展示到对应的会话预览区域, 以及右侧消息列表中.
    // 1. 根据响应中的 sessionId 获取到当前会话对应的 li 标签.
    //    如果 li 标签不存在, 则创建一个新的
    let curSessionLi = findSessionLi(resp.sessionId);
    if (curSessionLi == null) {
        curSessionLi = document.createElement('li');
        curSessionLi.setAttribute("message-session-id", resp.sessionId);
        // 此处 p 标签内部应该放消息的预览内容. 一会后面统一完成, 这里先置空
        curSessionLi.innerHTML = '<h3>' + resp.fromName + '</h3>' + '<p></p>'
        // 给这个 li 标签也加上点击事件的处理
        curSessionLi.onclick = function() {
            clickSession(curSessionLi);
        }
    }
    // 2. 把新的消息, 显示到会话的预览区域 (li 标签里的 p 标签中)
    //    如果消息太长, 就需要进行截断.
    let p = curSessionLi.querySelector('p');
    p.innerHTML = resp.content;
    if (p.innerHTML.length > 10) {
        p.innerHTML = p.innerHTML.substring(0, 10)+"...";
    }
    // 3. 把收到消息的会话, 给放到会话列表最上面.
    let sessionListUL = document.querySelector('#session-list');
    sessionListUL.insertBefore(curSessionLi, sessionListUL.children[0]);
    // 4. 如果当前收到消息的会话处于被选中状态, 则把当前的消息给放到右侧消息列表中.
    //    新增消息的同时, 注意调整滚动条的位置, 保证新消息虽然在底部, 但是能够被用户直接看到.
    if (curSessionLi.className == 'selected') {
        // 把消息列表添加一个新消息.
        let messageShowDiv = document.querySelector('.right .message-show');
        addMessage(messageShowDiv, resp);
        scrollBottom(messageShowDiv);
    }
    // 其他操作, 还可以在会话窗口上给个提示 (红色的数字, 有几条消息未读), 还可以播放个提示音.
    // 这些操作都是纯前端的. 实现也不难, 不是咱们的重点工作. 暂时不做了.

}



function findSessionLi(targetSessionId) {
    //获取到所有会话列表中的li标签
    let sessionLis = document.querySelectorAll("#session-list li");
    for (let li of sessionLis) {
        let sessionId = li.getAttribute("message-session-id");
        if (sessionId == targetSessionId) {
            return li;
        }
    }
    // 啥时候会触发这个操作, 就比如如果当前新的用户直接给当前用户发送消息, 此时没存在现成的 li 标签
    return null;
}
////////////////////////////
//从服务器获取用户登录信息
////////////////////////////
function getUserInfo() {
    $.ajax({
        type: "get",
        url: "/userInfo/getUserInfo",
        success: function(result) {
            if(result.code == 200 && result.data != null &&
                result.data.userId && result.data.userId >0) {
                //从服务器获取到，先去校验结果是否有效
                //如果无效则跳转到登陆页面
                //如果有效，则将用户显示奥界面上
                //同时也可以将userId记录下来以备后用
                let userDiv = document.querySelector(".client-container .main .left .user");
                console.log(result.data);
                let div = userDiv.querySelector("div");
                let span = userDiv.querySelector("span")
                div.setAttribute("class", "personal_profile_picture");

                span.innerHTML =  result.data.userName;
                userDiv.setAttribute("user-id",result.data.userId);

            } else {
                alert("用户登录未登录");
                location.href ="login.html";
            }
        }

    });
}

getUserInfo();


function getFriendList() {
    $.ajax({
        type: "get",
        url: "friendInfo/getFriendList",
        success: function(result) {
            if(result.code == 200 && result.data != null) {
                console.log("getFriendList");
                //1.先把之前的好友列表清空
                let friendListUL = document.querySelector('#friend-list');
                friendListUL.innerHTML = "" ;
                //2.遍历 data，把服务器响应的结果，加回到当前friend-list中
                for(let friend of result.data) {
                    let li = document.createElement('li');
                    li.innerHTML = '<h4>' + friend.friendName + '</h4>'
                    //同时也可以将friendId记录下来以备后用
                    //将friendId设置成自定义属性加入到li上
                    li.setAttribute("friend-id",friend.friendId);
                    friendListUL.appendChild(li);

                    //每个li就对应界面上对好友列表的选项，给这个li加上一个点击事件的处理
                    li.onclick = function() {
                        friends_home_page(friend,null);
                        //参数区分了当前用户点击的是哪个好友
                    }
                }
            }
        },
        error: function() {
            alert("获取好友失败");
        }
    });
}
getFriendList();


function getSessionList() {
    $.ajax({
        type: "get",
        url: "messageSession/sessionList",
        success: function(result) {
            if(result.code == 200 && result.data != null) {
                console.log(result)
                console.log("getSessionList");
                //1.先把之前的好友列表清空
                let sessionListUL = document.querySelector('#session-list');
                sessionListUL.innerHTML = "";
                //判断是否有好友申请
                getFriendRequest(sessionListUL)
                //2.遍历响应的数组,针对结果来构造页面
                let data = result.data;
                for(let session of result.data) {
                    //针对lastMessage的长度进行截断处理
                    if(session.lastMessage.length > 10) {
                        session.lastMessage = session.lastMessage.substring(0,10)+'...';
                    }
                    let li = document.createElement('li');
                    //把会话ID保存到 li标签的自定义属性中。
                    li.setAttribute('message-session-id',session.sessionId);
                    console.log(session.friends.length)

                    if (session.friends.length > 1) {
                        $.ajax({
                            type: "get",
                            url: "/GroupChat/GetTitle",
                            data:{
                                "sessionId": session.sessionId
                            },
                            success: function (result) {
                                if (result.code == 200 && result.data != null) {
                                    console.log(result.data)
                                    li.innerHTML = '<h3>' + result.data.title + '</h3>'+
                                        '<p>' + session.lastMessage+ '</p>';
                                }

                            }
                        })
                    } else {
                        li.innerHTML = '<h3>' + session.friends[0].friendName + '</h3>'+
                            '<p>' + session.lastMessage+ '</p>';
                    }

                    sessionListUL.appendChild(li);

                    //给li新增一个点击事件
                    li.onclick = function() {
                        // 这个写法, 就能保证, 点击哪个 li 标签
                        // 此处对应的 clickSession 函数的参数就能拿到哪个 li 标签.
                        clickSession(li);
                    }
                }


            }
        }


    });
}

getSessionList();


function clickSession(currentLi) {
    // 1. 设置高亮 拿到所有session-list里面的li标签
    let allLis = document.querySelectorAll('#session-list>li');
    activeSession(allLis, currentLi);
    // 2. 获取指定会话的历史消息 TODO
    let sessionId = currentLi.getAttribute("message-session-id");
    getHistoryMessage(sessionId);
}

function activeSession(allLis, currentLi) {
    // 这里的循环遍历, 更主要的目的是取消未被选中的 li 标签的 className
    for (let li of allLis) {
        if (li == currentLi) {
            li.className = 'selected';
        } else {
            li.className = '';
        }
    }
}

function getHistoryMessage(sessionId) {
    console.log("获取历史消息 sessionId = " + sessionId);
    let right = document.querySelector(".main .right");
    right.innerHTML = "";
    let title = document.createElement("div");
    title.setAttribute("class", "title");
    let message_show = document.createElement("div");
    message_show.setAttribute("class", "message-show");
    let textarea = document.createElement("textarea");
    textarea.setAttribute("class", "message-input");
    let divCtrl = document.createElement("div");
    divCtrl.setAttribute("class","ctrl")
    let buttonCtrl = document.createElement("button");
    buttonCtrl.innerHTML = "发送";
    right.appendChild(title);
    right.appendChild(message_show);
    right.appendChild(textarea);
    divCtrl.appendChild(buttonCtrl);
    right.appendChild(divCtrl);
    //1.清空右侧列表中的已有内容
    let titleDiv = document.querySelector('.right .title');
    let messageShowDiv = document.querySelector(".right .message-show");
    messageShowDiv.innerHTML = '';
    titleDiv.innerHTML = '';


    //重新设置会话标题，新的会话标题是点击的哪个会话上显示的标题
    // 先找到当前选择的会话，被选中的会话待遇select类
    let selectH3 = document.querySelector("#session-list .selected>h3")
    if(selectH3) {
        // selectH3可能不存在，比如在页面加载阶段， 并没有被会话选中
        // 也就没有select标签，此时无法查询出H3
        let img = document.createElement('img')
        img.setAttribute('class','back')
        img.src='img/fanhui.jpg'
        let div1 = document.createElement('div');
        div1.setAttribute('class','friend_chat_page_div')
        let div2 = document.createElement('div');
        div2.setAttribute('class','friend_chat_page')
        let span = document.createElement("span")
        span.innerHTML = selectH3.innerHTML;
        let img1 = document.createElement("img");
        img1.setAttribute('class','settings')
        img1.src = "img/shezhi.jpg";
        titleDiv.appendChild(img);
        titleDiv.appendChild(div1);
        let titleDiv1 = titleDiv.querySelector(".friend_chat_page_div")
        titleDiv1.appendChild(div2);
        titleDiv1.appendChild(span);
        titleDiv.appendChild(img1);
    }
    //3.发送 ajax请求 给服务器，获取该会话的历史消息
    $.ajax({
        type: 'get',
        url: 'message/getMessage',
        data:{
            "sessionId": sessionId

        },
        success: function (result) {
            if (result.code == 200 && result.data != null) {

                //此处返回的是js对象数组，里面的每个元素都是一条消息直接遍历
                for (let message of result.data) {
                    addMessage(messageShowDiv ,message);
                }
                //加个操作将构造好的消息，控制好滚动条，自动滚动到最下方
                scrollBottom(messageShowDiv);
            }
        }
    })
    let back = document.querySelector(".main .right .title .back");
    back.onclick = function () {
        location.reload();
    };
    let setting = document.querySelector(".main .right .title .settings");

    setting.onclick = function () {
        $.ajax({
            type: "get",
            url: "/friendInfo/getFriend",
            data:{
                "sessionId" : sessionId
            },
            success: function (result) {
                if (result.code == 200 && result.data != null) {
                    console.log("群聊个数" + result.data.length)
                    if (result.data.length > 2) {
                        groupChatMessage(result.data,sessionId);
                    }else {
                        for (let friends of result.data) {
                            let user = document.querySelector(".main .left .user");
                            let i = user.getAttribute("user-id");
                            if (i != friends.friendId) {
                                friends_home_page(friends,null);
                            }
                    }
                    }
                }

            },
        })

    };
    //1.获取到发送按钮和消息输入框
    let sendButton = document.querySelector(".right .ctrl button");
    //2.给发送按钮注册一个点击事件
    sendButton.onclick = () => sendButton123();

}

function addMessage(messageShowDiv, message) {
    //使用这个div表示一条消息
    let messageDiv = document.createElement('div');
    //此处需要针对当前消息是否是自己发的，决定是靠左还是靠右
    let selfUsername = document.querySelector('.left .user span').innerHTML;
    console.log(selfUsername);
    //定义类名的时候不需要加. 根据类名找类需要加
    if (selfUsername == message.fromName) {
        //消息是自己发的 靠右
        messageDiv.className = 'message message-right';
    } else {
        //消息不是自己发的 靠左
        messageDiv.className = 'message message-left';

    }
    messageDiv.innerHTML = '<div class="box">' +
        '<h4>' + message.fromName + '</h4>' +
        '<p>' + message.content + '</p>' +
        '</div>';
    messageShowDiv.appendChild(messageDiv);
}
//把messageShowDiv 里面的内容滚动到底部
function scrollBottom(elem) {
    //1.获取到可视区域的高度
    let clientHeight = elem.offsetHeight;
    //2.获取内容的高度
    let scrollHeight = elem.scrollHeight;
    //进行滚动操作，第一个参数是水平方向滚动的尺寸，第二个参数是垂直方向滚动的尺寸
    elem.scrollTo(0, scrollHeight - clientHeight);


}
////        注意 对已经存在的事务进行点击需要修改访问时间
//点击好友列表项，触发的函数
function clickFriend(friend) {
    console.log("clickFriend");
    console.log(friend)
    //1.先判断一下当前好友是否有对应的会话
    // 使用一个单独的函数来实现. 这个函数参数是用户的名字. 返回值是一个 li 标签. 找到了就是返回了对应会话列表里的 li; 如果没找到, 返回 null
    let sessionLi = findSessionByName(friend.friendName);
    let sessionListUL = document.querySelector("#session-list");

    if(sessionLi != null) {
        //2.如果存在会话就将这个会话变为选中状态，获取历史消息高亮，并且置顶
        //   insertBefore 把找到的这个li标签放到最前面。
        let friendRequest = sessionListUL.querySelector(".new_friend_request");
        if (friendRequest != null) {
            sessionListUL.insertBefore(sessionLi,sessionListUL.children[1]);

        }else {
            sessionListUL.insertBefore(sessionLi,sessionListUL.children[0]);

        }
        //    此处设置会话选中状态, 获取历史消息, 这俩功能其实在上面的 clickSession 中已经有了.
        //    此处直接调用 clickSession 即可
        //    clickSession(sessionLi);
        //    或者还可以模拟一下点击操作.
        sessionLi.click();
    } else {
        //3.如果不存在匹配结果，就自动创建一个新会话（创建li标签并通知服务器）
        sessionLi = document.createElement('li');
        //    构造 li 标签内容. 由于新会话没有 "最后一条消息", p 标签内容就设为空即可
        sessionLi.innerHTML = '<h3>' + friend.friendName + '</h3>' + '<p></p>'
        //    把标签进行置顶
        sessionListUL.insertBefore(sessionLi, sessionListUL.children[0]);
        sessionLi.onclick = function() {
            //给刚添加的li标签完成点击事件
            clickSession(sessionLi);
        }
        sessionLi.click();
        //     发送消息给服务器, 告诉服务器当前新创建的会话是啥样的.
        createSession(friend.friendId, sessionLi);
    }

    //4.还需要将好友列表切换到会话列表
    //    实现方式很容易, 只要找到会话列表标签页按钮, 模拟一个点击操作即可.
    let tabSession = document.querySelector(".tab .tab-session");
    //触发tabSession中的点击事件
    tabSession.click();

}
function findSessionByName(userName){
//先获取到所有会话列表中的li标签中
//然后依次遍历, 看看这些 li 标签谁的名字和要查找的名字一致.
    let sessionLis = document.querySelectorAll("#session-list>li")
    for(let sessionLi of sessionLis) {
        //获取到该li标签里面的h3标签，进一步得到名字
        let h3 =  sessionLi.querySelector("h3");
        if(h3.innerHTML == userName) {
            return sessionLi;
        }
    }
    return null;
}

function createSession(friendId,sessionLi) {
    $.ajax({
        type: 'post',
        url: '/messageSession/session?toUserId=' + friendId,
        success: function(result) {
            if(result.code == 200 && result.data != null) {
                console.log("会话创建成功! sessionId = " + result.data.sessionId);
                sessionLi.setAttribute("message-session-id" , result.data.sessionId);
            }
        },
        error: function() {
            console.log("会话创建失败！");
        }
    });
}



//加好友
//搜索好友
let button = document.querySelector(".main .left .search button");
let message = document.querySelector(".main .left .search input");
button.onclick = function () {
    let names;
    $.ajax({
        type: "get",
        url: "/userInfo/queryFriend",
        data: {
            "message":message.value
        },
        success: function (result) {
            message.innerHTML = ""
            if (result.code == 200 && result.data != null) {

                let right = document.querySelector(".main .right");
                right.innerHTML = "";
                let div1 = document.createElement("div");
                div1.setAttribute("class", "title");
                let img1 = document.createElement('img')
                img1.setAttribute('class','back')
                img1.src='img/fanhui.jpg'
                let span = document.createElement("span")
                span.innerHTML = "添加好友";
                right.appendChild(div1);
                let divTitle = right.querySelector(".title");
                divTitle.appendChild(img1);
                divTitle.appendChild(span);
                let div2 = document.createElement("div");
                div2.setAttribute("class", "add_chat_friends");
                for (let a of result.data) {
                    let div3 = document.createElement("div");
                    div3.setAttribute("class", "add_chat_friends_div");
                    let div4 = document.createElement("div");
                    div4.setAttribute("class", "add_chat_friends_img");
                    let span1 = document.createElement("span")
                    span1.innerHTML = a;
                    let input = document.createElement("input");
                    input.placeholder = "请写出你添加好友的理由";
                    input.type = "text";
                    let button = document.createElement("button");
                    button.innerHTML = "添加好友";
                    div3.appendChild(div4);
                    div3.appendChild(span1);
                    div3.appendChild(input);
                    div3.appendChild(button);
                    div2.appendChild(div3);
                }
                right.appendChild(div2);


                let friends = document.querySelectorAll(".main .right .add_chat_friends .add_chat_friends_div");
                for (let i of friends) {
                    let button = i.querySelector("button");
                    let input = i.querySelector("input");
                    let span = i.querySelector("span");
                    button.onclick = function () {

                        $.ajax({
                            type: "get",
                            url: "/userInfo/requestFriend",
                            data: {
                                "friend": span.innerHTML,
                                "argument": input.value
                            },
                            success:function (result) {
                                if(result.code == 200 && result.data != null) {
                                    right.innerHTML = "";

                                }
                            },
                        })
                    };
                }
            }else {
                alert(result.errMsg);
            }
        },
    })
};

//获取申请信息
function getFriendRequest(sessionListUL) {
    $.ajax({
        type: "get",
        url:"/friendApply/getFriendRequest",
        success: function (result) {
            if (result.code == 200 && result.data != null) {
                let count = 0;
                for (let i of result.data) {
                    count++;
                }
                if (count == 0) {
                    return;
                }
                let li = document.createElement("div");
                li.setAttribute("class", "new_friend_request");
                let h3 = document.createElement("h3");
                let p = document.createElement("p");
                li.appendChild(h3);
                h3.innerHTML ="新好友请求"
                li.appendChild(p);
                p.innerHTML = count;
                sessionListUL.appendChild(li)
                sessionListUL.insertBefore(li,sessionListUL.children[0]);

                li.onclick = function () {
                    let rightRequest = document.querySelector(".main .right");
                    rightRequest.innerHTML = "";
                    let div1 = document.createElement("div");
                    div1.setAttribute("class", "title");
                    let img1 = document.createElement('img')
                    img1.setAttribute('class','back')
                    img1.src='img/fanhui.jpg'
                    let span = document.createElement("span")
                    span.innerHTML = "好友申请";
                    rightRequest.appendChild(div1);
                    let divTitle = rightRequest.querySelector(".title");
                    divTitle.appendChild(img1);
                    divTitle.appendChild(span);
                    let div2 = document.createElement("div");
                    div2.setAttribute("class", "friend_request");
                    for (let a of result.data) {
                        let div3 = document.createElement("div");
                        div3.setAttribute("class", "friend_request_div");
                        let div4 = document.createElement("div");
                        div4.setAttribute("class", "friend_request_div_img");
                        let span1 = document.createElement("span")
                        span1.innerHTML = a.user;
                        let input = document.createElement("input");
                        input.value = a.argument;
                        let button1 = document.createElement("button");
                        let button2 = document.createElement("button");
                        button1.innerHTML = "接受";
                        button1.setAttribute("class","accept")
                        button2.innerHTML = "拒绝";
                        button2.setAttribute("class","turn_down")
                        div3.appendChild(div4);
                        div3.appendChild(span1);
                        div3.appendChild(input);
                        div3.appendChild(button1);
                        div3.appendChild(button2);
                        div2.appendChild(div3);
                    }
                    rightRequest.appendChild(div2);
                    let friendList2 = document.querySelectorAll(".main .right .friend_request");
                    let friendList1 = document.querySelectorAll(".main .right .friend_request .friend_request_div");
                    for (let i of friendList1) {
                        let button1 = i.querySelector(".accept");
                        let button2 = i.querySelector(".turn_down");
                        let span = i.querySelector("span");
                        button1.onclick = function () {
                            $.ajax({
                                type: "get",
                                url: "/friendApply/accept",
                                data:{
                                    "user": span.innerHTML
                                },
                                success: function (result) {
                                    if (result.code == 200 && result.data != null) {
                                        alert("添加成功");
                                        location.reload();
                                    }
                                },
                            })
                        };
                        button2.onclick = function () {
                            $.ajax({
                                type: "get",
                                url: "/friendApply/turn_down",
                                data:{
                                    "user": span.innerHTML
                                },
                                success: function (result) {
                                    location.reload();

                                },
                            })
                        };
                    }
                    let back1 = document.querySelector(".main .right .title .back");
                    back1.onclick = function () {
                        location.reload();
                    };
                };


            }
        },
    })


}
//好友主页
function friends_home_page(friend,sessionId) {
    let user1 = document.querySelector(".main .left .user span");
    let user = document.querySelector(".main .left .user");
    let userId = user.getAttribute("user-id");
    if (user1.innerHTML === friend.friendName) {
        personalHomepage(userId)
    }
    else {
        let code = 0;
        let right = document.querySelector(".main .right");
        right.innerHTML = "";
        let img = document.createElement("img");
        img.setAttribute("class", "friend_back");
        img.src = "./img/fanhui.jpg";
        let div = document.createElement("div");
        div.setAttribute("class", "friend_profile_picture");
        let div1 = document.createElement("div");
        div1.setAttribute("class", "personal_homepage_name");
        div1.innerHTML = friend.friendName;
        let div2 = document.createElement("div");
        div2.setAttribute("class", "personal_homepage_name_div");
        let span = document.createElement("span");
        span.innerHTML = "性别：";
        let span1 = document.createElement("span");
        span1.innerHTML = "男";
        let div3 = document.createElement("div");
        let div4 = document.createElement("div");
        let div5 = document.createElement("div");
        let span2 = document.createElement("span");
        span2.innerHTML = "年龄：";
        let span3 = document.createElement("span");
        span3.innerHTML = "19";
        let span4 = document.createElement("span");
        span4.innerHTML = "电子邮箱";
        let span5 = document.createElement("span");
        span5.innerHTML = "2514058904@qq.com";
        let div6 = document.createElement("div");
        div6.style.textAlign = "center";

        let button1 = document.createElement("button");
        button1.setAttribute("class","send-message_button")
        button1.innerHTML = "发送消息"
        let button2 = document.createElement("button");
        button2.innerHTML = "建立群聊"
        button2.setAttribute("class","set_up_group_chat_button")
        let button3 = document.createElement("button");

        $.ajax({
            type: "get",
            url: "friendInfo/IsYourFriend",
            data:{
                "friendId" : friend.friendId
            }, success: function (result) {
                if (result.data != null && result.code == 200) {
                    console.log("result.data" + result.data)
                    //1表示不上好友 2 表示是好友
                    if (result.data == 1) {
                        code = 1;
                        console.log("code 1 " +code)
                        button3.innerHTML = "添加好友";
                        button3.setAttribute("class","add-friend_button")
                        div3.appendChild(span);
                        div3.appendChild(span1);
                        div4.appendChild(span2);
                        div4.appendChild(span3);
                        div5.appendChild(span4);
                        div5.appendChild(span5);
                        div2.appendChild(div3);
                        div2.appendChild(div4);
                        div2.appendChild(div5);
                        div6.appendChild(button3);
                        right.appendChild(img);
                        right.appendChild(div);
                        right.appendChild(div1);
                        right.appendChild(div2);

                        right.appendChild(div6);

                    }else if (result.data == 2) {
                        code = 2;
                        console.log("code 1 2" +code)

                        button3.innerHTML = "删除好友";
                        button3.setAttribute("class","delete-friend_button")

                        div3.appendChild(span);
                        div3.appendChild(span1);
                        div4.appendChild(span2);
                        div4.appendChild(span3);
                        div5.appendChild(span4);
                        div5.appendChild(span5);
                        div2.appendChild(div3);
                        div2.appendChild(div4);
                        div2.appendChild(div5);
                        div6.appendChild(button1);
                        div6.appendChild(button2);
                        div6.appendChild(button3);
                        right.appendChild(img);
                        right.appendChild(div);
                        right.appendChild(div1);
                        right.appendChild(div2);
                        right.appendChild(div6);
                    }

                    console.log(code + "   code")
                    if (code == 2) {
                        let button4 = document.querySelector(".main .right .send-message_button");
                        console.log("button4 " + button4.innerHTML);
                        button4.onclick = function () {
                            clickFriend(friend);                        };
                        let button5 = document.querySelector(".main .right .set_up_group_chat_button")
                        let userName = document.querySelector(".client-container .main .left .user span")
                        let userId = document.querySelector(".client-container .main .left .user");
                        userName = userName.innerHTML;
                        userId = userId.getAttribute("user-id");
                        let user = {
                            friendId: userId,
                            friendName: userName
                        }
                        let friends = [user,friend]
                        button5.onclick = () => setUpGroupChat(friends,null,userId);
                        console.log("button4 " + button5.innerHTML);



                        let deleteFriendButton = document.querySelector(".main .right .delete-friend_button");
                        console.log(deleteFriendButton.innerHTML + "deleteFriendButton")
                        deleteFriendButton.onclick = function () {
                            console.log(deleteFriendButton.innerHTML + " 123deleteFriendButton")

                            $.ajax({
                                type: "get",
                                url: "/friendInfo/deleteFriend",
                                data:{
                                    "friendId" : friend.friendId
                                },
                                success: function (result) {
                                    if (result.code == 200 && result.data != null) {
                                        alert("删除成功")
                                        location.reload();
                                    }
                                },
                            })
                        };
                    }

                    if (code == 1) {
                        let addFriendButton = document.querySelector(".main .right .add-friend_button");
                        console.log(addFriendButton.innerHTML + "addFriendButton")

                        addFriendButton.onclick = function () {
                            console.log(addFriendButton.innerHTML + "  123addFriendButton")
                            let title = null;
                            console.log(sessionId+ "sessionId");
                            if (sessionId != null) {
                                $.ajax({
                                    type: "get",
                                    url: "/GroupChat/GetTitle",
                                    data: {
                                        "sessionId": sessionId
                                    },
                                    success: function (result) {
                                        if (result.code == 200 && result.data != null) {
                                            title = result.data.title;
                                            $.ajax({
                                                type: "get",
                                                url: "/userInfo/requestFriend",
                                                data: {
                                                    "friend": friend.friendName,
                                                    "argument": "通过" + title + "加你的"
                                                },
                                                success:function (result) {
                                                    if(result.code == 200 && result.data != null) {
                                                        right.innerHTML = "";

                                                    }
                                                },
                                            });                                        }
                                    },

                                })
                            }

                        };
                    }

                    let back2 = document.querySelector(".main .right  .friend_back");
                    back2.onclick = function () {
                        location.reload();
                    };
                }
            },
        })


    }

}

//将好友邀请到群聊
function setUpGroupChat(friends,sessionId,userId) {
    for (let friend of friends) {
        console.log("  setUpGroupChat "+ friend.friendName +  "  "  +friend.friendId )

    }
    let count = friends.length;
    //头部
    let rightSetUpGroupChat = document.querySelector(".main .right");
    rightSetUpGroupChat.innerHTML = "";
    let div = document.createElement("div");
    div.setAttribute("class", "title");
    let img1 = document.createElement('img')
    img1.setAttribute('class', 'back')
    img1.src = 'img/fanhui.jpg'
    let span = document.createElement("span")
    span.innerHTML = "建立群聊";
    rightSetUpGroupChat.appendChild(div);
    let divTitle = rightSetUpGroupChat.querySelector(".title");
    divTitle.appendChild(img1);
    divTitle.appendChild(span);
    // 中部
    let div1 = document.createElement("div");
    div1.setAttribute("class", "group_chat_friends");
    let div2 = document.createElement("div");
    div2.setAttribute("class", "group_chat_message");
    let sum = count % 5;
    let num = parseInt(count / 5);
    if (sum != 0) {
        num++;
    }
    let num1 = 0;
    console.log("sum" + sum + "num" + num);
    console.log(num);
    for (let j = 0; j < num; j++) {
        let div3 = document.createElement("div");
        div3.setAttribute("class", "group_friends");
        if (count > 5) {
            for (let i = num1; i < num1 + 5; i++) {
                let span1 = document.createElement("span");
                span1.setAttribute("id", "group-user");
                span1.setAttribute("friend-Id",  friends[i].friendId);
                let span2 = document.createElement("span");
                let div4 = document.createElement("div");
                div4.setAttribute("class", "group_friends_img");
                span2.setAttribute("class", "group_user");
                let friend = friends[i].friendName;
                if (friends[i].friendName.length > 4) {
                    friend = friends[i].friendName.substring(0, 4) + "..";
                }
                console.log("friend" + friend)
                span2.innerHTML = friend;
                span1.appendChild(div4);
                span1.appendChild(span2);
                div3.appendChild(span1);
            }
            count = count - 5;
            num1 = num1 + 5;
        } else {
            for (let i = num1; i < num1 + count; i++) {
                let span1 = document.createElement("span");
                span1.setAttribute("id", "group-user");
                span1.setAttribute("friend-Id",  friends[i].friendId);
                let span2 = document.createElement("span");
                let div4 = document.createElement("div");
                div4.setAttribute("class", "group_friends_img");
                span2.setAttribute("class", "group_user");
                let friend = friends[i].friendName;
                console.log("friends[i].length:" + friends[i].friendName.length)
                if (friends[i].friendName.length > 4) {

                    friend = friends[i].friendName.substring(0, 4) + "..";
                }
                console.log("friend" + friend)
                span2.innerHTML = friend;
                span1.appendChild(div4);
                span1.appendChild(span2);
                div3.appendChild(span1);
            }
        }
        div2.appendChild(div3);

    }

    div1.appendChild(div2);
    rightSetUpGroupChat.appendChild(div1);
    let div5 = document.createElement("div");
    div5.setAttribute("class", "line");
    rightSetUpGroupChat.appendChild(div5);
    let div6 = document.createElement("div");
    div6.setAttribute("class", "group_chat_invite_friends");

    friends2 = JSON.stringify(friends);
    $.ajax({
        type: "get",
        url: "/friendInfo/getOtherFriendList",
        data: {
            "friends": friends2
        },
        success: function (result) {
            if (result.code == 200 && result.data != null) {
                for (let friend of result.data) {
                    let div7 = document.createElement("div");
                    div7.setAttribute("class", "group_chat_invite_friends_div");
                    let input = document.createElement("input");
                    input.type = "checkbox";
                    let div8 = document.createElement("div");
                    div8.setAttribute("class", "group_chat_invite_friends_img");
                    let span3 = document.createElement("span");
                    span3.setAttribute("friend_id", friend.friendId);
                    span3.innerHTML = friend.friendName;
                    span3.setAttribute("class", "group_user");
                    div7.appendChild(input);
                    div7.appendChild(div8);
                    div7.appendChild(span3);
                    div6.appendChild(div7)
                }
            }

        },

    });

    rightSetUpGroupChat.appendChild(div6)
    let button = document.createElement("button");
    button.setAttribute("class", "add_a_contact_button");
    button.innerHTML = "添加联系人";
    rightSetUpGroupChat.appendChild(button);
    let button1 = rightSetUpGroupChat.querySelector(".add_a_contact_button");
    button1.onclick = function () {
        let friend1s = [];
        let group_chat_invite_friends_divs = document.querySelectorAll(".main .right .group_chat_invite_friends .group_chat_invite_friends_div");
        console.log("group_chat_invite_friends_divs   "+ group_chat_invite_friends_divs.length )
        for (let div of group_chat_invite_friends_divs) {
            let checkbox = div.querySelector("input");
            console.log("checkbox" +  checkbox.checked)
            if (checkbox.checked) {

                let span = div.querySelector("span");
                let friendName = span.innerHTML;
                let friendId = span.getAttribute("friend_id");
                let user = {
                    friendId: friendId,
                    friendName: friendName
                }
                friend1s.push(user);
            }
        }

        if (sessionId == null) {
        for (let friend of friends) {
            friend1s.push(friend);
        }
            let friends3 = JSON.stringify(friend1s);
            console.log("sessionId" + sessionId + "friendss " + friends3);

            $.ajax({
                type: 'post',
                url: '/messageSession/getSessionId',
                success: function (result) {
                    if (result.code == 200 && result.data != null) {
                        sessionId = result.data;
                        console.log("sessionId" + sessionId);
                        $.ajax({
                            type: "get",
                            url: "/messageSession/InviteFriends",
                            data: {
                                "sessionId":sessionId,
                                "friends": friends3,
                                "groupTitle": "群聊",
                                "userId" : userId
                            },
                            success: function (result) {
                                if (result.data != null && result.code == 200) {

                                    let sessionLi = document.createElement("li");
                                    sessionLi.innerHTML = '<h3>' + result.data + '</h3>' + '<p></p>'
                                    let sessionListUL = document.querySelector("#session-list");
                                    //   insertBefore 把找到的这个li标签放到最前面。
                                    let friendRequest = sessionListUL.querySelector(".new_friend_request");
                                    if (friendRequest != null) {
                                        sessionListUL.insertBefore(sessionLi,sessionListUL.children[1]);

                                    }else {
                                        sessionListUL.insertBefore(sessionLi,sessionListUL.children[0]);

                                    } sessionLi.onclick = function() {
                                        //给刚添加的li标签完成点击事件
                                        clickSession(sessionLi);
                                    }
                                    sessionLi.click();
                                    sessionLi.setAttribute("message-session-id", sessionId);
                                    getHistoryMessage(sessionId);
                                }
                            }
                        });
                    }

                },
                error: function () {
                    console.log("会话创建失败！");
                }
            });
        }else {
            let friends3 = JSON.stringify(friend1s);
            console.log("sessionId" + sessionId + "friendss " + friends3);
            $.ajax({
                type: "get",
                url: "/messageSession/insertFriends",
                data: {
                    "sessionId": sessionId,
                    "friends" : friends3
                },
                success: function (result) {
                    if (result.data != null && result.code == 200) {
                        getHistoryMessage(sessionId);
                    }
                    },
            })
        }


    }
    let back3 = document.querySelector(".main .right .title .back");
    back3.onclick = function () {
        location.reload();
    };
}


//setUpGroupChat();

//群聊信息
function groupChatMessage(friends,sessionId) {
    let count = friends.length;
    //头部
    let rightGroupChatMessage = document.querySelector(".main .right");
    rightGroupChatMessage.innerHTML = "";
    let div = document.createElement("div");
    div.setAttribute("class", "title");
    let img1 = document.createElement('img')
    img1.setAttribute('class', 'back')
    img1.src = 'img/fanhui.jpg'
    let span = document.createElement("span")
    span.innerHTML = "群聊消息";
    rightGroupChatMessage.appendChild(div);
    let divTitle = rightGroupChatMessage.querySelector(".title");
    divTitle.appendChild(img1);
    divTitle.appendChild(span);
    rightGroupChatMessage.appendChild(divTitle);
    // 中部
    let div1 = document.createElement("div");
    div1.setAttribute("class", "group_chat_friends");
    let div2 = document.createElement("div");
    div2.setAttribute("class", "group_chat_message");

    let sum = count % 5;
    let num = parseInt(count / 5);
    if (sum != 0) {
        num++;
    }
    let num1 = 0;
    for (let j = 0; j <num ; j++) {
        let div3 = document.createElement("div");
        div3.setAttribute("class", "group_friends");
        if (count > 5) {
            for (let i = num1; i < num1 + 5; i++) {
                let span1 = document.createElement("span");
                span1.setAttribute("id", "group-user");
                span1.setAttribute("friend-Id",  friends[i].friendId);
                let span2 = document.createElement("span");
                let div4 = document.createElement("div");
                div4.setAttribute("class", "group_friends_img");
                span2.setAttribute("class", "group_user");
                let friend = friends[i].friendName;
                if (friends[i].friendName.length > 4) {
                    friend = friends[i].friendName.substring(0, 4) + "..";
                }
                console.log("friend" + friend)
                span2.innerHTML = friend;
                span1.appendChild(div4);
                span1.appendChild(span2);
                div3.appendChild(span1);
            }
            count = count - 5;
            num1 = num1 + 5;
        } else {
            for (let i = num1; i < num1 + count; i++) {
                let span1 = document.createElement("span");
                span1.setAttribute("id", "group-user");
                span1.setAttribute("friend-Id",  friends[i].friendId);

                let span2 = document.createElement("span");
                let div4 = document.createElement("div");
                div4.setAttribute("class", "group_friends_img");
                span2.setAttribute("class", "group_user");
                let friend = friends[i].friendName;
                console.log("friends[i].length:" + friends[i].friendName.length)
                if (friends[i].friendName.length > 4) {

                    friend = friends[i].friendName.substring(0, 4) + "..";
                }
                console.log("friend" + friend)
                span2.innerHTML = friend;
                span1.appendChild(div4);
                span1.appendChild(span2);
                div3.appendChild(span1);
            }
        }
        div2.appendChild(div3);
    }
    div1.appendChild(div2);
    rightGroupChatMessage.appendChild(div1);
    let div5 = document.createElement("div");
    div5.setAttribute("class", "mediate_between_two_parties");
    let div6 = document.createElement("div");
    div6.setAttribute("class", "line");


    rightGroupChatMessage.appendChild(div6);

    let input = document.createElement("input");
    input.setAttribute("class", "group_chat_name");
    input.type = "text";
    let button1 = document.createElement("button");
    button1.setAttribute("class", "set_group_chat_name");
    button1.innerHTML = "设置群聊名称";
    let button2 = document.createElement("button");
    button2.setAttribute("class", "send-message_button_group");
    button2.innerHTML = "发送消息";
    let button3 = document.createElement("button");
    button3.setAttribute("class", "set_up_group_chat_button_Invite");
    button3.innerHTML = "邀请好友";
    let button4 = document.createElement("button");

    $.ajax({
        type: "get",
        url: "/GroupChat/GetTitle",
        data: {
            "sessionId": sessionId
        },
        success: function (result) {
            if (result.data != null && result.code == 200) {
                let code = 0; //code = 1 为群主 2 为普通用户
                let i = result.data.userId;
                let user = document.querySelector(".main .left .user");
                let userId = user.getAttribute("user-id")
                console.log(userId + " s1caadawd")
                console.log(friends.friendId + "friends.friendId" + i + "  result.data.userId ")
                if (i == userId) {
                    code = 1;
                    button4.setAttribute("class", "delete-friend_button_group");
                    button4.innerHTML = "解散群聊";
                } else {
                    code = 2;
                    button4.setAttribute("class", "quit-friend_button_group");
                    button4.innerHTML = "退出群聊";
                }
                div5.appendChild(div6);
                div5.appendChild(input);
                div5.appendChild(button1);
                div5.appendChild(button2);
                div5.appendChild(button3);
                div5.appendChild(button4);
                rightGroupChatMessage.appendChild(div5);

                let SetTheGroupChatNameButton = document.querySelector(".main .right .set_group_chat_name");
                let SetTheGroupChatNameTitle = document.querySelector(".main .right .group_chat_name");

                SetTheGroupChatNameButton.onclick = function () {
                    $.ajax({
                        type: "get",
                        url: "/GroupChat/SetTitle",
                        data: {
                            "sessionId": sessionId,
                            "title": SetTheGroupChatNameTitle.value

                        },
                        success: function (result) {
                            if (result.code == 200 && result.data != null) {
                                location.reload();
                            }
                        },

                    });

                };
                let sendMessageButtonGroup = document.querySelector(".main .right .send-message_button_group");
                sendMessageButtonGroup.onclick = function () {
                    getHistoryMessage(sessionId);
                };
                let setUpGroupChatButtonInvite = document.querySelector(".main .right .set_up_group_chat_button_Invite");
                setUpGroupChatButtonInvite.onclick = () => setUpGroupChat(friends,sessionId);

                if (code == 1) {
                    let deleteFriendButtonGroup = document.querySelector(".main .right .delete-friend_button_group");
                    deleteFriendButtonGroup.onclick = function () {
                        $.ajax({
                            type: "get",
                            url: "/messageSession/deleteSession",
                            data:{
                                "sessionId": sessionId
                            },
                            success: function (result) {
                                if (result.code == 200 && result.data != null) {
                                    alert(result.data);
                                    location.reload();

                                }

                            },
                        })
                    };
                }
                if (code == 2) {
                    let quitFriendButtonGroup = document.querySelector(".main .right .quit-friend_button_group");
                    quitFriendButtonGroup.onclick = function () {
                        $.ajax({
                            type: "get",
                            url: "/messageSession/quitFriend",
                            data: {
                                "sessionId": sessionId,
                                "friendId" : userId
                            },
                            success: function (result) {
                                if (result.data != null && result.code == 200) {
                                    alert(result.data);
                                    location.reload();
                                }

                            }

                        });
                    };
                }
                let rightGroupUserSpan = document.querySelectorAll(".main .right .group_chat_message #group-user");
                for (let span of rightGroupUserSpan) {
                    let userId = span.getAttribute("friend-id");
                    $.ajax({
                        type: "get",
                        url: "/friendInfo/getFriendByFriendId",
                        data: {
                            "friendId": userId
                        },
                        success: function (result) {
                            let friend;
                            if (result.data != null && result.code == 200) {
                                friend = {
                                    "friendId": userId,
                                    "friendName": result.data
                                };
                            }

                            span.onclick = () => friends_home_page(friend,sessionId);
                        }
                    })
                }
                let back4 = document.querySelector(".main .right .title .back");
                back4.onclick = function () {
                    location.reload();
                };

            }

        },
    });


}

// groupChatMessage();


let user = document.querySelector(".main .left .user");
user.onclick = () => personalHomepage(user.getAttribute("user-id"));


function personalHomepage(userId) {
    let userInfo ;
    //头部
    let rightPersonalHomepage = document.querySelector(".main .right");
    rightPersonalHomepage.innerHTML = "";
    let div = document.createElement("div");
    div.setAttribute("class", "title");
    let img1 = document.createElement('img')
    img1.setAttribute('class', 'back')
    img1.src = 'img/fanhui.jpg'
    let span = document.createElement("span")
    span.innerHTML = "个人主页";
    rightPersonalHomepage.appendChild(div);
    let divTitle = rightPersonalHomepage.querySelector(".title");
    divTitle.appendChild(img1);
    divTitle.appendChild(span);
    let div1 = document.createElement("div");
    div1.setAttribute("class", "personage_profile_picture");
    let div2 = document.createElement("div");
    div2.setAttribute("class", "personal_homepage_name");
    let div3 = document.createElement("div");
    div3.setAttribute("class", "personal_homepage_name_div");
    let div4 = document.createElement("div");
    let div5 = document.createElement("div");
    let div6 = document.createElement("div");
    let span1 = document.createElement("span")
    let span2 = document.createElement("span")
    let span3 = document.createElement("span");
    let span4 = document.createElement("span")
    let span5 = document.createElement("span")
    let span6 = document.createElement("span");

    $.ajax({
        type: "get",
        url: "/userInfo/getUserInfoByUserId",
        data: {
            "userId" : userId
        },
        success: function (result) {
            if (result.code == 200 && result.data != null) {
                userInfo = result.data;
                div2.innerHTML = result.data.userName;
                span1.innerHTML = "性别：";
                span2.innerHTML = "男";
                span3.innerHTML = "年龄：";
                span4.innerHTML = "12";
                span5.innerHTML = "电子邮箱：";
                span6.innerHTML = "2514058904@qq.com";
            }
        },
    });
    //中部
    div4.appendChild(span1);
    div4.appendChild(span2);
    div5.appendChild(span3);
    div5.appendChild(span4);
    div6.appendChild(span5);
    div6.appendChild(span6);
    rightPersonalHomepage.appendChild(div1)
    rightPersonalHomepage.appendChild(div2)
    div3.appendChild(div4);
    div3.appendChild(div5);
    div3.appendChild(div6);
    rightPersonalHomepage.appendChild(div3)
    let div7 = document.createElement("div");
    div7.setAttribute("class", "mediate_between_two_parties");
    let button = document.createElement("button");
    button.setAttribute("class", "EDITOR_button")
    button.innerHTML = "编辑个人信息"
    let button1 = document.createElement("button");
    button1.setAttribute("class", "Logout_user_button");
    button1.innerHTML = "注销用户"
    div7.appendChild(button);
    div7.appendChild(button1);
    rightPersonalHomepage.appendChild(div7);
    let EDITORButtonPerson = rightPersonalHomepage.querySelector(".EDITOR_button");
    EDITORButtonPerson.onclick = () => editPersonalInformation(userInfo);

    let logoutUserButton = rightPersonalHomepage.querySelector(".Logout_user_button");
    logoutUserButton.onclick = function () {

        $.ajax({
            type: "get",
            url: "/userInfo/deleteUserInfo",
            data: {
                "userId": userId
            },
            success: function (result) {
                if (result.code == 200 && result.data != null) {
                     location.href = "login.html";
                }else {
                    alert(result.errMsg);
                    location.reload();
                }
            }
        })
    };
    let back5 = document.querySelector(".main .right .title .back");
    back5.onclick = function () {
        location.reload();
    };
}

// personalHomepage();

function updateUserInfo(data,userInfo) {
    console.log("editComplete进入了")
    $.ajax({
        type: "get",
        url: "/userInfo/updateUserInfo",
        data:{
            "userName" : data,
            "userId": userInfo.userId
        },
        success: function (result) {
            if (result.data != null && result.code == 200) {
                console.log(data);
                let userDivSpan = document.querySelector(".client-container .main .left .user span");
                userDivSpan.innerHTML =  result.data.userName;

                location.reload();
            }else {
                alert(result.errMsg);
                editPersonalInformation(userInfo);
            }
        },
    });
};

function editPersonalInformation(userInfo) {
    console.log("editPersonalInformation     " + userInfo.userName + "  " + userInfo.userId);
    //头部
    let rightEditPersonalInformation = document.querySelector(".main .right");
    rightEditPersonalInformation.innerHTML = "";
    let div = document.createElement("div");
    div.setAttribute("class", "title");
    let img1 = document.createElement('img')
    img1.setAttribute('class', 'back')
    img1.src = 'img/fanhui.jpg'
    let span = document.createElement("span")
    span.innerHTML = "编辑主页";
    rightEditPersonalInformation.appendChild(div);
    let divTitle = rightEditPersonalInformation.querySelector(".title");
    divTitle.appendChild(img1);
    divTitle.appendChild(span);

    //中部
    let div1 = document.createElement("div");
    div1.setAttribute("class", "personage_profile_picture");
    let div2 = document.createElement("div");
    div2.setAttribute("class", "personal_homepage_name");
    div2.innerHTML = userInfo.userName;
    let div3 = document.createElement("div");
    div3.setAttribute("class", "personal_homepage_name_div");
    let div4 = document.createElement("div");
    let div5 = document.createElement("div");
    let div6 = document.createElement("div");
    let div7 = document.createElement("div");
    let span1 = document.createElement("span")
    let span2 = document.createElement("span")
    let span3 = document.createElement("span");
    let span4 = document.createElement("span");
    span1.innerHTML = "姓名：";
    span2.innerHTML = "性别:";
    span3.innerHTML = "年龄：";
    span4.innerHTML = "电子邮箱：";
    let input1 = document.createElement("input")
    input1.type = "text";
    input1.placeholder = userInfo.userName;
    input1.setAttribute("id","name")
    let input2 = document.createElement("input")
    input2.type = "text";
    input2.placeholder = "性别"
    let input3 = document.createElement("input");
    input3.type = "text";
    input3.placeholder = "年龄";
    let input4 = document.createElement("input");
    input4.type = "text";
    input4.placeholder = "电子邮箱";
    div4.appendChild(span1);
    div4.appendChild(input1);
    div5.appendChild(span2);
    div5.appendChild(input2);
    div6.appendChild(span3);
    div6.appendChild(input3);
    div7.appendChild(span4);
    div7.appendChild(input4);
    div3.appendChild(div4);
    div3.appendChild(div5);
    div3.appendChild(div6);
    div3.appendChild(div7);
    let div8 = document.createElement("div");
    div8.setAttribute("class", "mediate_between_two_parties");
    let button = document.createElement("button");
    button.setAttribute("class", "Edit_complete")
    button.innerHTML = "编辑完成";
    div8.appendChild(button);

    div3.appendChild(div8);
    rightEditPersonalInformation.appendChild(div1);
    rightEditPersonalInformation.appendChild(div2);
    rightEditPersonalInformation.appendChild(div3);
    let data = rightEditPersonalInformation.querySelector("#name");

    let editComplete = rightEditPersonalInformation.querySelector(".Edit_complete");
    console.log("editComplete没进入了")
    console.log(editComplete.innerHTML)
    editComplete.onclick = () => updateUserInfo(data.value,userInfo)
    let back6 = document.querySelector(".main .right .title .back");
    back6.onclick = function () {
        location.reload();
    };
}


 // editPersonalInformation();


